<!--
 * FilePath     : \src\views\home\components\latestNew.vue
 * Author       : SJZ
 * Date         : 2025-03-24 21:18
 * LastEditors  : SJZ
 * LastEditTime : 2025-04-08 21:36
 * Description  : 最新新闻
 * CodeIterationRecord: 
 -->
<template>
  <div class="y-aline-start px-10% mt-50 box-border">
    <div class="aline-between mb-20">
      <h1>Latest <span class="theme-color-primaryFontColor">News</span></h1>
      <h3 class="b-b-dashed b-b-1 theme-bc-borderColor pb-3 theme-color-info cursor-pointer">MORE NEWS</h3>
    </div>
    <el-carousel class="news" type="card" arrow="always" trigger="click" indicator-position="none" :interval="4000" height="500px">
      <el-carousel-item v-for="(latestNew, index) in latestNews" :key="index" class="rd-10px">
        <div class="y-aline-start wh-full rd-10px">
          <img :src="latestNew.image" height="70%" width="100%" class="rd-t-10px" />
          <div class="new-wrap w-full h-30% px-10% box-border">
            <div class="mt-15">
              <i class="iconfont icon-date theme-color-primaryFontColor fs-24 mr-10"></i>
              <span class="fs-24">{{ latestNew.date }}</span>
            </div>
            <div class="mt-20">
              <span class="fs-24 fw-bold">
                {{ latestNew.content }}
              </span>
            </div>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script setup lang="ts">
defineProps({
  latestNews: {
    type: Array as PropType<Record<string, any>[]>,
    require: true
  }
});
</script>
<style lang="scss" scoped>
.news.el-carousel {
  .el-carousel__item {
    border: 1px solid $base-color;
    box-sizing: border-box;
    &.is-active {
      .new-wrap {
        opacity: 1;
      }
    }
    .new-wrap {
      background-color: #ffffff;
      opacity: 0.4;
    }
  }
}
</style>
